<template>
	<view>
		<view style="background: var(--themeBackground);">
			<appBar title="人员管理" rightText="添加" :showRight="true" @rightClick="addPerson"></appBar>
			<view class="borderbottom">
				<tabsComponent :tabsList="list" @handleTabClick="tabClick" />
			</view>

		</view>
		<view class="cloumCenter mtb20 ">
			<view class="cardContiner ">
				<view class="w100 pd mtb20"
					style="background: var(--themeDefultBackground); padding: 10rpx;box-sizing: border-box;">
					<uv-input placeholder="搜索人员姓名" prefixIcon="search" border="none"
						prefixIconStyle="font-size: 22px;color: #909399"></uv-input>
				</view>
				<scroll-view scroll-y="true" style="height: 70vh;" @scrolltolower="loadMore">
					<view v-for="(item,index) in userList" :key="item.id" class="rowSpaceBetween  personCard"
						:class="{borderbottom:index != (data -1)}" @click="goUserDetail(item)">
						<view class="rowStart">
							<view class="name fontWeight">
								{{item.name}}
							</view>
							<view class="tipsText">
								（{{item.account}}）
							</view>
						</view>

						<view class="status" :class="statusFun(item.auditStatus.toString()).class">
							{{statusFun(item.auditStatus.toString()).value}}
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import tabsComponent from '@/components/tabsComponent/tabsComponent.vue';
	import {
		agencyUserInfoListApi
	} from '@/api/agentApi/user.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	// tab
	const list = [{
			name: '人员管理',
			value: 0
		},
		{
			name: '超级授理商',
			value: 1
		},
	]

	// 查询的参数
	const userInfo = reactive({
		account: '',
		name: '',
		pageNum: 1,
		pageSize: 10,
		phone: '',
		status: '',
		userId: ''
	})

	// 页码 总页
	const pageInfo = reactive({
		pageNum: 1,
		pageSize: 15,
	})
	let pages = ref(0)

	// 人员列表
	let userList = ref()
	const getagencyUserInfoList = async () => {
		uni.showLoading({
			title: '加载中'
		});
		let res = await agencyUserInfoListApi(pageInfo)
		uni.hideLoading();
		pages.value = res.data.pages
		if (pageInfo.pageNum == 1) {
			userList.value = res.data.list
		} else {
			userList.value = [...userList.value, ...res.data.list]
		}
	}

	// 触底加载
	const loadMore = () => {
		if (pages.value == pageInfo.pageNum) {
			return uni.showToast({
				title: '没有更多了',
				icon: 'none'
			})
		}
		pageInfo.pageNum++
		getagencyUserInfoList()
	}


	// 跳转到添加用户
	const addPerson = () => {
		uni.navigateTo({
			url: '/pages/tabbar/mine/page/addPersonnel/addPersonnel'
		})
	}

	// 切换tab
	const tabClick = () => {
		console.log('点击');
	}
	// 去详情页
	const goUserDetail = (item) => {
		console.log(item);
		uni.navigateTo({
			url: `/pages/tabbar/mine/page/personle/personle?id=${item.userId}`
		})
	}

	// 页面加载
	onLoad(() => {
		getagencyUserInfoList()
	})
</script>

<style scoped lang="scss">
	.personCard {
		padding: 20rpx 10rpx;
		box-sizing: border-box;
	}

	.name {
		font-size: 32rpx
	}
</style>